<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%" accordion>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">部门编号: {{ props.row.id }}</p>
            <p m="t-0 b-2">部门名称: {{ props.row.name }}</p>
            <p m="t-0 b-2">部门类型: {{ props.row.kind }}</p>
            <p m="t-0 b-2">部门电话: {{ props.row.phone_number }}</p>
            <p m="t-0 b-2">部门成立日期: {{ props.row.establish_date }}</p>
            <h3>岗位</h3>
            <el-table :data="form.position[props.row.id]">
              <el-table-column label="编号" prop="id" />
              <el-table-column label="名称" prop="name" />
              <el-table-column label="类型" prop="kind" />
              <el-table-column>
                <template #default="scope">
                  <el-button size="small" @click="OnOpenUpdatePositionWin(props.row.id, scope.$index)">修改</el-button>
                  <el-button size="small" type="danger" @click="OnClickDeletePositionBtn(props.row.id, scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <h3>成员</h3>
            <el-table :data="form.staff[props.row.id]">
              <el-table-column label="编号" prop="id" />
              <el-table-column label="姓名" prop="name" />
              <el-table-column label="性别" prop="sex" />
              <el-table-column label="岗位" prop="position" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="部门名称" prop="name" />
      <el-table-column label="操作">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" style="width: 200px" />
          <el-button size="small" @click="drawer = true">新增部门</el-button>
        </template>
        <template #default="scope">
          <el-button size="small" @click="OnOpenUpdataWin(scope.$index)">修改</el-button>
          <el-button size="small" type="danger" @click="OnClickDeleteBtn(scope.$index)">删除</el-button>
          <el-button size="small" @click="OnOpenAddPositionWin(filterTableData[scope.$index].id)">增加岗位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer v-model="drawer2">
      <template #default>
        <h4>部 门 信 息 修 改</h4>
        <div class="content">
          <el-form :model="form.updateData">
            <el-form-item prop="name">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门名称</span>
              <el-input v-model="form.updateData.name" placeholder="部门名称" type="text" tabindex="4" size="large" />
            </el-form-item>
            <el-form-item prop="kind">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门类型</span>
              <el-input v-model="form.updateData.kind" placeholder="部门类型" type="text" tabindex="5" size="large" />
            </el-form-item>
            <el-form-item prop="phone_number">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门电话</span>
              <el-input
                v-model="form.updateData.phone_number"
                placeholder="部门电话"
                type="text"
                tabindex="6"
                size="large"
              />
              <el-form-item prop="fax_number">
                <span class="ml-3 w-35 text-gray-600 inline-flex items-center">传真电话</span>
                <el-input
                  v-model="form.updateData.fax_number"
                  placeholder="传真电话"
                  type="text"
                  tabindex="4"
                  size="large"
                />
              </el-form-item>
            </el-form-item>
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">成立日期</span>
            <el-form-item prop="establish_date">
              <el-date-picker
                value-format="YYYY-MM-DD"
                placeholder="上岗时间"
                v-model="form.updateData.establish_date"
              />
            </el-form-item>
            <el-form-item prop="description">
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门描述</span>
              <el-input
                v-model="form.updateData.description"
                placeholder="部门描述"
                type="text"
                tabindex="6"
                size="large"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawer2 = false">取消</el-button>
          <el-button type="primary" @click="OnClickUpdateBtn">修改</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="drawer">
      <template #default>
        <h4>新 增 部 门</h4>
        <el-form :model="form.addData">
          <el-form-item prop="name">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门名称</span>
            <el-input
              v-model="form.addData.name"
              placeholder="部门名称"
              type="text"
              tabindex="1"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="type">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门类型</span>
            <el-input
              v-model="form.addData.kind"
              placeholder="部门类型"
              type="text"
              tabindex="2"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="phone_number">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门电话</span>
            <el-input
              v-model="form.addData.phone_number"
              placeholder="部门电话"
              type="text"
              tabindex="3"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="fax_number">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">传真电话</span>
            <el-input v-model="form.addData.fax_number" placeholder="传真电话" type="text" tabindex="4" size="large" />
          </el-form-item>
          <el-form-item prop="establish_date">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">成立日期</span>
            <el-date-picker value-format="YYYY-MM-DD" placeholder="上岗时间" v-model="form.addData.establish_date" />
          </el-form-item>
          <el-form-item prop="description">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">部门描述</span>
            <el-input v-model="form.addData.description" placeholder="部门描述" type="text" tabindex="6" size="large" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="OnClickAddBtn">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="drawer3">
      <template #default>
        <h4>新 增 岗 位</h4>
        <el-form :model="form.addPosition">
          <el-form-item prop="name">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">岗位名称</span>
            <el-input
              v-model="form.addPosition.name"
              placeholder="岗位名称"
              type="text"
              tabindex="1"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="kind">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">岗位类型</span>
            <el-input
              v-model="form.addPosition.kind"
              placeholder="岗位类型"
              type="text"
              tabindex="2"
              size="large"
              clearable
            />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawer3 = false">取消</el-button>
          <el-button type="primary" @click="OnClickAddPositionBtn">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="drawer4">
      <template #default>
        <h4>岗 位 修 改</h4>
        <el-form :model="form.updatePosition">
          <el-form-item prop="name">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">岗位名称</span>
            <el-input
              v-model="form.updatePosition.name"
              placeholder="部门名称"
              type="text"
              tabindex="1"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="kind">
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">岗位类型</span>
            <el-input
              v-model="form.updatePosition.kind"
              type="text"
              placeholder="部门类型"
              tabindex="2"
              size="large"
              clearable
            />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="drawer3 = false">取消</el-button>
          <el-button type="primary" @click="OnClickUpdatePositionBtn">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox } from "element-plus"
import { computed, reactive, ref } from "vue"
import { Department, DptPersonnel, InsertDepartment, UpdateDepartment } from "@/models/department"
import { Position, InsertPosition, UpdatePosition } from "@/models/position"
import { deleteData, getDataset, postData, putData } from "@/api/crud"

const drawer = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)

const form = reactive({
  departmentForms: ref<Department[]>([]),
  addData: {} as InsertDepartment,
  updateData: {} as UpdateDepartment,
  addPosition: {} as InsertPosition,
  updatePosition: {} as UpdatePosition,
  staff: ref<DptPersonnel[][]>([]),
  position: ref<Position[][]>([])
})

getDataset<Department>("departments").then((resp) => {
  form.departmentForms = resp.data
  for (let i = 0, l = form.departmentForms.length; i < l; ++i) {
    getDataset<DptPersonnel>(`department/personnels/${form.departmentForms[i].id}`).then((re) => {
      form.staff[form.departmentForms[i].id] = re.data
    })
    getDataset<Position>(`/department/positions/${form.departmentForms[i].id}`).then((re) => {
      form.position[form.departmentForms[i].id] = re.data
    })
  }
})

function UpdateData() {
  getDataset<Department>("departments").then((resp) => {
    form.departmentForms = resp.data
    for (let i = 0, l = form.departmentForms.length; i < l; ++i) {
      getDataset<DptPersonnel>(`department/personnels/${form.departmentForms[i].id}`).then((re) => {
        form.staff[form.departmentForms[i].id] = re.data
      })
      getDataset<Position>(`department/positions/${form.departmentForms[i].id}`).then((re) => {
        form.position[form.departmentForms[i].id] = re.data
      })
    }
  })
}

const search = ref("")
const filterTableData = computed(() =>
  form.departmentForms.filter(
    (data: any) =>
      (!search.value && !form.departmentForms) ||
      data.establish_date.toLowerCase().includes(search.value.toLowerCase()) ||
      data.name.toLowerCase().includes(search.value.toLowerCase()) ||
      data.kind.toLowerCase().includes(search.value.toLowerCase()) ||
      data.id == search.value
  )
)

function OnClickDeleteBtn(index: number) {
  console.log(filterTableData.value[index].id)
  ElMessageBox.confirm(`确认删除此部门?`).then(() => {
    deleteData<number>("department", filterTableData.value[index].id).then(() => {
      UpdateData()
    })
  })
}

function OnClickAddBtn() {
  ElMessageBox.confirm("确认增加部门").then(() => {
    postData<InsertDepartment>("department", form.addData).then(() => {
      UpdateData()
    })
  })
}

function OnOpenUpdataWin(index: number) {
  drawer2.value = true
  form.updateData.name = filterTableData.value[index].name
  form.updateData.id = filterTableData.value[index].id
  form.updateData.phone_number = filterTableData.value[index].phone_number
  form.updateData.fax_number = filterTableData.value[index].fax_number
  form.updateData.description = filterTableData.value[index].description
  form.updateData.establish_date = filterTableData.value[index].establish_date
  form.updateData.kind = filterTableData.value[index].kind
}

function OnClickUpdateBtn() {
  putData<UpdateDepartment>("department", form.updateData).then(() => {
    getDataset<Department>("departments").then((resp) => {
      form.departmentForms = resp.data
      drawer2.value = false
    })
  })
}

function OnClickAddPositionBtn() {
  console.log(typeof form.addPosition.manning_quotas)
  ElMessageBox.confirm("确定增加该岗位")
    .then(() => {
      postData<InsertPosition>("position", form.addPosition)
    })
    .then(() => {
      drawer3.value = false
      UpdateData()
    })
}

function OnClickUpdatePositionBtn() {
  putData<UpdatePosition>("position", form.updatePosition).then(() => {
    drawer4.value = false
    UpdateData()
  })
}

function OnOpenUpdatePositionWin(id: number, index: number) {
  console.log(id + " " + index)
  drawer4.value = true
  form.updatePosition.id = form.position[id][index].id
  form.updatePosition.department_id = form.position[id][index].department_id
  form.updatePosition.name = form.position[id][index].name
  form.updatePosition.kind = form.position[id][index].kind
}

function OnOpenAddPositionWin(index: number) {
  drawer3.value = true
  form.addPosition.department_id = index
  form.addPosition.name = ""
  form.addPosition.kind = ""
}

function OnClickDeletePositionBtn(id: number, index: number) {
  ElMessageBox.confirm(`确认删除此岗位?`).then(() => {
    deleteData<number>("position", form.position[id][index].id).then(() => {
      UpdateData()
    })
  })
}
</script>
